<template>
  <view class='hotList_page'>
    <!-- 热榜 -->
    <view class='list_box'>
      <view class='title'>新闻热榜</view>
      <view class='list'>
        <view v-for='(item,index) in 10' :key='index'>
          <view class='num' :class='{num_color: index<3}'>{{index+1}}</view>
          <view class='hotList_content'>
            <view>马云的福字</view>
            <view class='hotList_data'>
              <text>10w+阅读</text>
              <text>10w+在看</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

  export default {
    mounted() {

    },
    methods: {
     
    }
  }
</script>

<style lang="scss" scoped>
.hotList_page {
  width: 100%;
  padding: 20upx;
  box-sizing: border-box;
  .list_box {
    width: 100%;
    background: #fff;
    border-radius: 12upx;
    margin-bottom: 30upx;
    .title {
      width: 100%;
      height: 90upx;
      padding: 22upx 22upx 0;
      box-sizing: border-box;
      font-size: 38upx;
      color: #000;
      font-weight: 600;
      border-bottom: 1px solid #E2E2E2;
    }
    .list {
      width: 100%;
      padding: 22upx;
      box-sizing: border-box;
      >view {
        width: 100%;
        height: 80upx;
        display: flex;
        align-items: center;
        .num {
          width: 60upx;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 32upx;
          color: #666;
        }
        .num_color {
          color: #FF3030;
        }
        .hotList_content {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 32upx;
          color: #333;
        }
        .hotList_data {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 28upx;
          color: #999;
          >text {
            margin-left: 15upx;
            &:nth-child(1) {
              margin: 0;
            }
          }
        }
      }
    }
  }


}
</style>